{% extends 'frontend/base.html' %}
{% load i18n %}
{% block content %}
    <div class="row">
        <div class="col-12 grid-margin">
            <div class="card card-statistics">
                <div class="card-body p-0">
                    <div class="row">
                        <div class="col-md-6 col-lg-3">
                            <div class="d-flex justify-content-between border-right card-statistics-item">
                                <div>
                                    <h1>{{ total.domains }}</h1>
                                    <p class="text-muted mb-0">{% trans "Domain datas" %}</p>
                                </div>
                                <i class="icon-layers text-primary icon-lg"></i>
                            </div>
                        </div>
                        <div class="col-md-6 col-lg-3">
                            <div class="d-flex justify-content-between border-right card-statistics-item">
                                <div>
                                    <h1>{{ total.ips }}</h1>
                                    <p class="text-muted mb-0">{% trans "IP datas" %}</p>
                                </div>
                                <i class="icon-people text-primary icon-lg"></i>
                            </div>
                        </div>
                        <div class="col-md-6 col-lg-3">
                            <div class="d-flex justify-content-between border-right card-statistics-item">
                                <div>
                                    <h1>{{ total.bugs }}</h1>
                                    <p class="text-muted mb-0">{% trans "Vulnerabilities" %}</p>
                                </div>
                                <i class="icon-pin text-primary icon-lg"></i>
                            </div>
                        </div>
                        <div class="col-md-6 col-lg-3">
                            <div class="d-flex justify-content-between card-statistics-item">
                                <div>
                                    <h1>-</h1>
                                    <p class="text-muted mb-0">{% trans "Plugins" %}</p>
                                </div>
                                <i class="icon-refresh text-primary icon-lg"></i>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="row">
        <div class="col-md-6 grid-margin stretch-card">
            <div class="card">
                <div class="card-body">
                    <h4 class="card-title">{% trans "Tasks report" %}</h4>
                    <canvas id="lineChart"></canvas>
                </div>
            </div>
        </div>
{#        <div class="col-md-6 grid-margin stretch-card">#}
{#            <div class="card">#}
{#                <div class="card-body">#}
{#                    <h4 class="card-title">服务类型</h4>#}
{#                    <canvas id="barChart"></canvas>#}
{#                </div>#}
{#            </div>#}
{#        </div>#}
        <div class="col-md-6 grid-margin stretch-card">
            <div class="card">
                <div class="card-body">
                    <h4 class="card-title">{% trans "Vulnerability statistics" %}</h4>
{#                    <canvas id="doughnutChart"></canvas>#}
                    <div class="bug-statics">
                        {% for i in data_bugs %}
                            <div class="badge badge-{{ i.cls }}"><a href="/?q=bug%3D%22{{ i.label }}%22">{{ i.label }}:{{ i.count }}</a></div>
                        {% endfor %}
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="row">

        <div class="col-md-12 grid-margin stretch-card">
            <div class="card">
                <div class="card-body">
                    <h4 class="card-title">{% trans "Nodes" %}</h4>
                    <p class="card-description">
                        {% trans "Show the status for running nodes" %}<span class="icon-star" style="color:#439aff;"></span>
                    </p>
                    <div class="table-responsive">
                        <table class="table running-node">
                            <thead>
                            <tr>
                                <th>#</th>
                                <th>{% trans "Node name" %}</th>
                                <th>{% trans "Scanning queue" %}</th>
                                <th>{% trans "Running" %}</th>
                                <th>{% trans "Finished" %}</th>
                                <th>{% trans "Times" %}</th>
                                <th>{% trans "Status" %}</th>
                                <th>{% trans "Options" %}</th>
                            </tr>
                            </thead>
                            <tbody>
                            {% for node in nodes %}
                                <tr>
                                    <td># {{ forloop.counter }}</td>
                                    <td>{{ node.nodename }}</td>
                                    <td>
                                        <div class="badge badge-info badge-pill">{{ node.tasks }}</div>
                                    </td>
                                    <td>
                                        <div class="badge badge-primary badge-pill">{{ node.running }}</div>
                                    </td>
                                    <td>
                                        <div class="badge badge-warning badge-pill">{{ node.finished }}</div>
                                    </td>
                                    <td><span class="text-muted">{{ node.time }}</span></td>
                                    {% if node.status == "Pending" %}
                                        <td><label class="badge badge-danger">Pending</label></td>
                                    {% else %}
                                        <td><label class="badge badge-success">Running </label></td>
                                    {% endif %}

                                    <td>
                                        <button type="button" class="btn btn-light btn-sm btn-logs"
                                                data-target="{{ node.nodename }}"><i class="icon-info"></i>Logs
                                        </button>
                                        {% if node.status == "Pending" %}
                                            <button type="button" class="btn btn-light btn-sm btn-delete"
                                                    data-target="{{ node.nodename }}"><i class="icon-ban"></i>
                                                Delete
                                            </button>
                                        {% endif %}
                                    </td>
                                </tr>
                            {% endfor %}

                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="row">
        <div class="col-md-3 grid-margin stretch-card">
            <div class="card">
                <div class="card-body">
                    <h4 class="card-title">{% trans "Tasks" %}</h4>
                    <button class="btn btn-primary btn-sm mt-3 mb-4" data-toggle="modal" data-target="#task-modal"
                            data-whatever="@mdo">{% trans "New Tasks" %}
                    </button>
                    <blockquote class="blockquote blockquote-primary">
                        <p><code>POST /api/v1/scan</code></p>
                        <p>{% trans "Body content is url or ip, one per line" %}</p>
                        <p><code>GET /api/v1/scan?t=[url|ip]</code></p>

                        <footer class="blockquote-footer">{% trans "Scanning API" %}</footer>
                    </blockquote>
                </div>
            </div>
        </div>
        <div class="col-md-9 grid-margin stretch-card">
            <div class="card">
                <div class="row h-100">
                    <div class="card-body">
                        <div class="d-flex align-items-center">
                            <img src="/static/images/92x92.jpg" class="img-md rounded-circle mb-2"
                                 alt="profile image">
                            <div class="ml-3">
                                <h4>{% trans "Assets config" %}</h4>
                                <p class="text-muted mb-0">Developer</p>
                            </div>
                        </div>
                        <p class="mt-4 card-text">
                            {% trans "Enter the relevant assets here, then you can query" %}
                        </p>
                        <button class="btn btn-info btn-sm mt-3 mb-4" data-toggle="modal" data-target="#exampleModal-4"
                                data-whatever="@mdo">{% trans "New asset" %}
                        </button>

                        <div class="border-top pt-3">
                            <div class="row">
                                <table class="table table-bordered zc-table">
                                    <thead>
                                    <tr>
                                        <th>
                                            #
                                        </th>
                                        <th>
                                            {% trans "Asset name" %}
                                        </th>
                                        <th>
                                            {% trans "Times" %}
                                        </th>
                                        <th>
                                            {% trans "Descript" %}
                                        </th>
                                        <th>
                                            {% trans "Options" %}
                                        </th>
                                    </tr>
                                    </thead>
                                    <tbody>
                                    {% for data in zc_data %}
                                        <tr>
                                            <td>
                                                {{ forloop.counter }}
                                            </td>
                                            <td>
                                                <a href="{% url 'zc-detail' data.id %}">{{ data.name }}</a>

                                            </td>
                                            <td>
                                                {{ data.add_time }}
                                            </td>
                                            <td>
                                                {{ data.descript }}
                                            </td>
                                            <td>
                                                <button type="button" class="btn btn-secondary btn-xm zc-view"
                                                        data-id="{{ data.id }}"><i class="icon-cloud-download"></i>View
                                                </button>
                                                <button type="button" class="btn btn-light btn-xm zc-delete"
                                                        data-id="{{ data.id }}"><i class="icon-refresh"></i>Delete
                                                </button>
                                            </td>
                                        </tr>
                                    {% endfor %}


                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="modal fade" id="exampleModal-4" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel-4"
         aria-hidden="true">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="exampleModalLabel-4">{% trans "Create asset" %}</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    <form>
                        <div class="form-group">
                            <label for="recipient-name" class="col-form-label">{% trans "Asset name" %}:</label>
                            <input type="text" class="form-control" id="recipient-name">
                        </div>
                        <div class="form-group">
                            <label for="recipient-name" class="col-form-label">{% trans "Asset descript" %}:</label>
                            <input type="text" class="form-control" id="recipient-desc">
                        </div>
                        <div class="form-group">
                            <label for="message-text" class="col-form-label">{% trans "Domains" %}:</label>
                            <textarea class="form-control" id="domain-text" rows="4"></textarea>
                        </div>
                        <div class="form-group">
                            <label for="message-text" class="col-form-label">{% trans "IPs" %}:</label>
                            <textarea class="form-control" id="ip-text" rows="5"></textarea>
                        </div>
                    </form>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-success zc-create">{% trans "Create" %}</button>
                    <button type="button" class="btn btn-light" data-dismiss="modal">Close</button>
                </div>
            </div>
        </div>
    </div>

    <div class="modal fade" id="zc-update-modal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel-4"
         aria-hidden="true">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="exampleModalLabel-4">{% trans "View asset" %}</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    <form>
                        <div class="form-group">
                            <label for="recipient-name" class="col-form-label">{% trans "Asset name" %}:</label>
                            <input type="text" class="form-control" id="recipient-name">
                        </div>
                        <div class="form-group">
                            <label for="recipient-name" class="col-form-label">{% trans "Asset descript" %}:</label>
                            <input type="text" class="form-control" id="recipient-desc">
                        </div>
                        <div class="form-group">
                            <label for="message-text" class="col-form-label">{% trans "Domain" %}:</label>
                            <textarea class="form-control" id="domain-text" rows="4"></textarea>
                        </div>
                        <div class="form-group">
                            <label for="message-text" class="col-form-label">{% trans "IP" %}:</label>
                            <textarea class="form-control" id="ip-text" rows="5"></textarea>
                            <input type="hidden" id="zc-id" value=""/>
                        </div>
                    </form>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-success zc-update">{% trans "Update" %}</button>
                    <button type="button" class="btn btn-light" data-dismiss="modal">Close</button>
                </div>
            </div>
        </div>
    </div>

    <div class="modal fade" id="task-modal" tabindex="-1" role="dialog" aria-labelledby="task-modal"
         aria-hidden="true">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="exampleModalLabel-4">{% trans "Add task" %}</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    <form>
                        <div class="form-group">
                            <textarea class="form-control" id="content-modal" rows="12"
                                      placeholder="{% trans "Support multiple tasks, one line per line, ip or domain name, ip supports CIDR expression" %}"></textarea>
                        </div>
                    </form>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-success task-create">{% trans "Create" %}</button>
                    <button type="button" class="btn btn-light" data-dismiss="modal">Close</button>
                </div>
            </div>
        </div>
    </div>

    <div class="modal fade" id="node-modal" tabindex="-1" role="dialog" aria-labelledby="node-modal"
         aria-hidden="true">
        <div class="modal-dialog modal-lg" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="exampleModalLabel-4">{% trans "Node logs" %}</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    <textarea id="shell-mode" rows="10" style="width:100%;" readonly="readonly">
                    </textarea>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-light" data-dismiss="modal">Close</button>
                </div>
            </div>
        </div>
    </div>
    <script>
        var chart_labels = {{ data_chart.labels | safe}};
        var chart_data = {{ data_chart.data }};

        var bar_labels = {{ data_bar.labels |safe }};
        var bar_data = {{ data_bar.data }};

        {#var doughnut_labels =#}
        {#{{ data_bugs.labels |safe }}#}
        {#var doughnut_data =#}
        {#{{ data_bugs.data }}#}
    </script>
{% endblock %}
{% block extrascript %}
    <script src="/static/js/my.js"></script>
{% endblock %}
